<template>
  <div class="rich_content indexBG">
    <div class="searchDiv">
      <div class="search" @tap="toSearch">
        <van-icon name="search" size="20px" color="#999" />
        <div class="tips">请输入搜索关键词</div>
      </div>
    </div>

    <van-tabs v-if="indexTabs.length > 0" @change="onChangeTabs" sticky swipeable offset-top="10px" animated line-width="0px" line-height="0px" tab-class="special-tab" tab-active-class="special-tab-active">
      <van-tab v-for="(category,i) in indexTabs" :title="category.name" :name="category.id" :key="i">
        <Card v-if="tabContents[i].length > 0" v-for="(item,k) in tabContents[i]" :key="k" :content="item.desc" :item-id="item.id" :item-bg="item.xclass"></Card>
      </van-tab>
    </van-tabs>
    <LoginDialog v-if="isShowLoginDialog"></LoginDialog>
    <van-share-sheet :show="showShare" :options="options" @select="shareSelect" @close="showShareSheet" />
  </div>

</template>

<script>
import PageLoading from "../../components/PageLoading";
import {showToast} from "../../utils";
import Card from "../../components/Card";
import {API} from "../../api";
import LoginDialog from "../../components/login/LoginDialog";
import {hideLoading, showLoading} from "../../api/wechat";
export default {
  data () {
    return {
      indexTabs:[],
      tabIndex:0,
      currentCatID:1,
      tabPages :[],
      tabContents:[],
      pageRandom:0,
      showShare:false,
      options: [{name: '保存至相册', icon: 'poster',}, {name: '分享海报', icon: 'wechat-moments',}],
    }
  },
  components: {LoginDialog, Card, PageLoading},
  computed:{
    isShowLoginDialog:function () {
      return this.$store.state.showLoginDailog
    }
  },
  watch:{
    pageRandom:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    }
  },
  mounted() {
    let _this = this;
    _this.getCategory();
  },
  onPullDownRefresh () {
    let _this = this;
    _this.tabPages[_this.tabIndex] = 1;
    _this.tabContents[_this.tabIndex] = [];
    _this.getContent();

  },
  updated() {
      if(this.tabContents){
      }

  },

  onReachBottom () {
    let _this = this;
    _this.getContent();

  },
  onShareAppMessage(){
    return {
      title:'【卡片说说】总有一句说说戳中你的心坎，点击查看。',
      imageUrl:"https://oss.ido.icu/images/share.png?x-oss-process=imgalias/thumb",
      path:"/pages/index/main"
    }
  },
  methods: {

    /*显示/隐藏 分享面板*/
    showShareSheet(params){
      this.showShare = !this.showShare;
    },
    shareSelect(o){
      console.log(o);
    },
    shareClose(){
      console.log('shareClose');
    },
    toSearch(){
      //this.$router.push({ path: '/pages/pics/main', query: { itemId: itemId } });
      this.$router.push({ path: '/pages/search/main'});
    },
    getCategory(){
      let _this = this;
      API.getCategory({cT:1}).then( res => {
        if(res.code == 200){
          _this.indexTabs = res.data;
          _this.currentCatID = res.data[0].id;
          res.data.map(function (i,item) {
            _this.tabPages.push(1);
          });
          _this.getContent();
        }
      });
    },
    async getContent(){
        let _this = this;
        showLoading({title:"加载中"});
        let page = _this.tabPages[_this.tabIndex];
        await API.getContent({catId:_this.currentCatID,page:page}).then( dat => {
          hideLoading();
          wx.stopPullDownRefresh();
          if(dat.data.length > 0){
            let data = dat.data;
            if(_this.tabContents[_this.tabIndex] == undefined){
              _this.tabContents[_this.tabIndex] = data;
            } else {
              _this.tabContents[_this.tabIndex].push(...data);
            }
            _this.pageRandom =  Math.random();
            _this.tabPages[_this.tabIndex] = page +1;
          } else {
            showToast("暂无更多数据");
          }
        });
    },

    onChangeTabs(e){
      let _this = this;
      _this.tabIndex  = e.mp.detail.index;
      _this.currentCatID  = e.mp.detail.name;
      if(_this.tabPages[_this.tabIndex] == 1){
        _this.getContent();
      }
    }

  },

  created () {
  }
}
</script>

<style scoped>
  .indexBG{
    background-color: #f0f0f0;
  }
  .searchDiv{
    background-color: #f368a1;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0px;
  }
  .searchDiv .search{
    width: 93%;
    height: 35px;
    margin: 0px auto;
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    border-radius: 5px;
    background-color: #f7f8fa;
  }
  .searchDiv .search .tips{
    color: #999;
    padding-left: 5px;
  }
</style>
